<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-svg-icon">
      <switch-normal v-model="commonAttr.isSvga" label="加载Svga动画" @change="onChangeAttr"></switch-normal>
      <input-normal v-if="commonAttr.isSvga" label="Svga地址" placeholder="url" v-model="commonAttr.svgaUrl" @change="onChangeAttr"></input-normal>
      <template v-else>
        <el-divider content-position="center">图标数据</el-divider>
        <dropdown-normal v-model="commonAttr.url" :valLists="SVG_D_LIST" label="选择图标" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
        <input-normal label="svg地址" placeholder="" v-model="commonAttr.url" @change="onChangeAttr"></input-normal>
        <dropdown-normal v-model="commonAttr.type" :valLists="SVG_ANIMATE_PLAY_TYPE" label="播放方式" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
        <dropdown-normal v-model="commonAttr.start" :valLists="SVG_ANIMATE_START_TYPE" label="触发类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
        <dropdown-normal v-model="commonAttr.pathTimingFunction" :valLists="SVG_ANIMATE_EASE_TYPE" label="路径缓动类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
        <dropdown-normal v-model="commonAttr.animTimingFunction" :valLists="SVG_ANIMATE_EASE_TYPE" label="动画缓动类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
        <input-normal label="持续时间" v-model="commonAttr.duration" @change="onChangeAttr"></input-normal>
        <input-normal label="延迟秒数" placeholder="1" v-model="commonAttr.delay" @change="onChangeAttr"></input-normal>
        <input-normal label="每个路径间隔距离" placeholder="20" v-model="commonAttr.dashGap" @change="onChangeAttr"></input-normal>
        <input-normal label="线条宽度" v-model="commonAttr.strokeWidth" @change="onChangeAttr"></input-normal>
        <switch-normal v-model="commonAttr.isDrag" label="拖动播放" @change="onChangeAttr"></switch-normal>
        <switch-normal v-model="commonAttr.reverseStack" label="反向动画" @change="onChangeAttr"></switch-normal>
        <color-normal v-model="commonAttr.color" label="颜色" format="rgb" @change="onChangeAttr"></color-normal>
        <color-normal v-model="commonAttr.backgroundColor" label="背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
      </template>
    </el-form>
  </right-template>
</template>
<script>
  import RightTemplate from '@/views/child/right/right-template.vue'
  import ColorNormal from '@/views/components/edit/ColorNormal.vue'
  import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
  import SliderNormal from '@/views/components/edit/SliderNormal.vue'
  import InputNormal from '@/views/components/edit/InputNormal.vue'
  import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'

  import { mapActions, mapState } from 'vuex'
  import { editUtils } from '@/views/js/edit-utils'
  import { SVG_ANIMATE_PLAY_TYPE, SVG_ANIMATE_START_TYPE, SVG_ANIMATE_EASE_TYPE, SVG_D_LIST } from '@/common/const-shapes';

  export default {
    name: "RightSvgIcon",
    mixins: [editUtils],
    setup () {
      return {
        SVG_ANIMATE_PLAY_TYPE: SVG_ANIMATE_PLAY_TYPE,
        SVG_ANIMATE_START_TYPE: SVG_ANIMATE_START_TYPE,
        SVG_ANIMATE_EASE_TYPE: SVG_ANIMATE_EASE_TYPE,
        SVG_D_LIST: SVG_D_LIST
      }
    },
    components: {
      RightTemplate,
      ColorNormal,
      SliderNormal,
      DropdownNormal,
      InputNormal,
      SwitchNormal,
    },
    methods: {
      ...mapActions({
      }),
      onChangeIcon(url){
        this.updateCurrentComponentData( {commonAttr: { url } } );
      },
      getSVG(options){
        let onLoad = function() {
          let domSandbox = document.createElement('div');
          domSandbox.innerHTML = this.responseText;
          let svgTag = domSandbox.querySelector('svg');
          if (!svgTag) {
            throw new Error(
              'Vivus [load]: Cannot find the SVG in the loaded file : ' +
                options.file
            );
          }
          svgTag.setAttribute('width', '100%');
          svgTag.setAttribute('height', '100%');
          options.parentEl.appendChild(svgTag);
        };
        let oReq = new window.XMLHttpRequest();
        oReq.addEventListener('load', onLoad);
        oReq.open('GET', options.file);
        oReq.send();
      }
    },
    mounted(){
      // let lis = this.$refs.li;
      // if(lis && lis.length > 0){
      //   let list = SVG_LIST;
      //   _.forEach(lis, (li, index) => {
      //     this.getSVG({ parentEl: li,  file: list[index] });
      //   })
      // }
    },
  };
</script>

<style lang="scss">
.icons{
  padding: 0;
  margin: 10px;
  li{
    display: inline-block;
    width: 60px;
  }
}
</style>
